<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<!--
/**
 * @module Polymer UI Elements
 */
-->

<link rel="import" href="../../polymer-elements/polymer-selector/polymer-selector.html">

<!--
/**
 * polymer-ui-tabs is a polymer-selector styled to look like a tab menu.
 *
 * Example:
 *
 *     <polymer-ui-tabs selected="0">
 *       <span>One</span>
 *       <span>Two</span>
 *       <span>Three</span>
 *       <span>Four</span>
 *     </polymer-ui-tabs>
 *
 * @class polymer-ui-tabs
 * @extends polymer-selector
 */
-->
<polymer-element name="polymer-ui-tabs" extends="polymer-selector">
  <template>
    <style>
      @host {
        * {
          display: block;
          height: 59px;
          border: 0;
          border-bottom: 1px solid #e8e8e8;
          white-space: nowrap;
        }
      }
      
      /*@polyfill @host > * */
      ::-webkit-distributed(*) {
        display: inline-block;
        min-width: 60px;
        height: 59px;
        line-height: 59px;
        text-align: center;
        padding: 0 8px;
        cursor: pointer;
        font-size: 14px;
        color: #999;
      }
      
      /*@polyfill @host > *.polymer-selected */
      ::-webkit-distributed(*.polymer-selected) {
        background: #4888f0;
        color: #fff;
      }
    </style>
    <shadow></shadow>
  </template>
</polymer-element>
